<template>
	<view class="toast" :class="{'show': show}" @click="click">
		<image v-if="type==1" src="@/public/images/public/ysctsc.png" mode="aspectFit"></image>
		<image v-if="type==2" src="@/public/images/public/wjs.png" mode="aspectFit"></image>
		<view class="info">
			<text>{{text}}</text>
		</view>
	</view>
</template>

<script>
	/**
	 * ShowToast 交互反馈
	 * @description 自定义顶部弹出交互反馈
	 */
	export default {
		name: "ShowToast",
		data() {
			return {
				show: true, //是否展示
				text: '', //文字内容
				type: 1, //展示类型：1 正确；2 错误
				time: 1.5, //展示时长，秒
				go: false, //是否跳转消息页
				chatId: null //对话ID
			};
		},
		methods: {
			/**
			 * @description 加载
			 */
			load(options = {}) {
				this.show = true
				options.type = options.type ? options.type : 1
				Object.keys(options).forEach((key)=>{
					this[key] = options[key]
				})
				if(this.timer != null){
					clearTimeout(this.timer)
					this.timer = null
				}
				this.timer = setTimeout(() => {//定时关闭并重置数据
					this.show = false
					this.time = 1.5
					this.go = false
					this.chatId = null
					this.timer = null
				}, this.time*1000)
			},
			/**
			 * @description 点击事件
			 */
			click() {
				if(this.go){
					this.show = false
					if(this.chatId){
						let params = {cid: this.chatId}
						this.$Router.push({ name: 'chatbox', params})
					}else{
						this.$Router.pushTab({name: 'message'})
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.toast{
		z-index: 10000;
		width: 610rpx;
		height: 104rpx;
		background: #FFFFFF;
		box-shadow: 0 5rpx 20rpx 0 rgba(0, 85, 255, 0.2);
		border-radius: 10rpx;
		position: fixed;
		left: 30rpx;
		top: 20rpx;
		right: 30rpx;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 40rpx;
		visibility: hidden;
		image{
			width: 48rpx;
			height: 48rpx;
		}
		.info{
			margin-left: 30rpx;
			max-width: 530rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			word-break: break-all;
			line-clamp: 2;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			display: -webkit-box;
			text{
				font-size: 30rpx;
				line-height: 30rx;
				color: #333333;
			}
		}
		&.show{
			visibility: visible;
		}
	}
</style>
